<template>
	<div id="login">
		<!-- 主图片 -->
		<img class="img" src="./img/王佳.jpg" alt="加载失败">
		<!-- <van-notice-bar scrollable text="欢迎来到小佳卖菜" /> -->
		<!-- 登录组件 -->
		<div class="denglu">
			<div class="denglu_top">
				<span @click="a=true" class="phon">手机号登录</span>
				<span @click="a=false" class="code">密码登录</span>
			</div>
			<hr class="left" :class="{left_r:!a}">
			
			<!-- 手机号登录界面 -->
			<div class="denglu_content" v-if="a">
				<input v-model="tel" maxlength="11" class="phon_kuang" placeholder="请输入您的手机号" type="tel">
				<div @click="fasong" class="go_yanzheng" v-if="!tem">获取验证码</div>
				<div class="yanzheng" v-else>已发送({{tem}}s)</div>
				<input maxlength="6" v-model="code" class="code_kuang" placeholder="请输入验证码" type="text">
			</div>
			<!-- 账号密码登录界面 -->
			<div class="denglu_content" v-else>
				<input class="phon_kuang" placeholder="请输入您的账号" type="text">
				<input class="code_kuang" placeholder="请输入您的密码" type="password">
				<input class="yanzhengma" placeholder="请输入验证码" type="text">
			</div>
			<van-button @click="denglu" class="go_btn" type="primary">登录</van-button>
			<van-button @click="$router.go(-1)" class="cancel" plain hairline type="primary">取消</van-button>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import {getVerCodeApi,toTelLoginApi} from '@/api'
	import {mapState,mapMutations} from 'vuex'
	
	export default {
		name:'login',
		data(){
			return{
				a:true,
				tel:'',
				code:'',
				tem:0,
				timer:null
			}
		},
		computed:{
			aa(){
				//判断双向绑定的手机号是否正确
				return /^1[3|5|7|8]\d{9}$/.test(this.tel)
			},
			bb(){
				return /^\d{6}$/.test(this.code)
			},
		},
		methods:{
			...mapMutations(['user']),
			async fasong(){
				if(!this.tel.trim())return
				this.tem=10
				this.timer = setInterval(()=>{
					this.tem--
					if(this.tem == 0){
						clearInterval(this.timer)
					}
				},1000)
				if(this.aa){
					let res = await getVerCodeApi(this.tel)
					if(res.data.success_code === 200){
						Toast('已发送，请注意查收');
					}else{
						Toast('发送失败');
					}
				}
			},
			async denglu(){
				if(!this.aa){
					Toast('请填写手机号');
					return
				}
				if(!this.bb){
					Toast('请填写验证码');
					return
				}
				let res = await toTelLoginApi(this.tel,this.code)
				console.log(res)
				let users = res.data.data
				if(users){
					this.user(users)
					this.$router.go(-1)
				}else{
					Toast('登录失败');
				}
			}
		}
	}
</script>

<style scoped lang="less">
	#login{
		    background-color: #fffbe8;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		.img{
			padding-top: 20px;
			display: block;
			max-width: 350px;
			margin: 0 auto;
			opacity: .8;
			border-radius: 50%;
		}
		.denglu{
			.go_btn,.cancel{
				display: block;
				width: 280px;
				margin: 10px auto;
			}
			width: 320px;
			margin: 0 auto;
			position: relative;
			.denglu_content{
				margin-top: 10px;
				position: relative;
				.yanzhengma{
					width: 150px;
					
				}
				.yanzhengma:focus{
					border: 1px solid #1fd02d;
					font-size: 16px;
					width: 152px;
					height: 32px;
					box-shadow: 0px 0px 10px #1fd02d;
				}
				.code_kuang{
					margin: 20px 0;
				}
				.phon_kuang:focus{
					border: 1px solid #1fd02d;
					font-size: 16px;
					width: 302px;
					height: 32px;
					box-shadow: 0px 0px 10px #1fd02d;
				}
				.code_kuang:focus{
					border: 1px solid #1fd02d;
					font-size: 16px;
					width: 302px;
					height: 32px;
					box-shadow: 0px 0px 10px #1fd02d;
				}
				.go_yanzheng,.yanzheng{
					font-size: 12px;
					position: absolute;
					right: 0;
					top: 10px;
					right: 20px;
					color: #ccc;
				}
				input{
					font-size: 16px;
					width: 300px;
					height: 30px;
					margin: 0 auto;
				}
			}
			.left{
				background-color: #1fd02d;
				width: 160px;
				margin: 0;
				padding: 0;
				position: absolute;
				// left: 0;
			}
			.left_r{
				background-color: #19a525;
				width: 160px;
				margin: 0;
				padding: 0;
				position: absolute;
				right: 0;
			}
			.denglu_top{
				display: flex;
				font-size: 20px;
				line-height: 40px;
				.phon{
					flex: 1;
					color: #000000;
					text-align: center;
				}
				.code{
					flex: 1;
					color: #000000;
					text-align: center;
				}
			}
		}
	}
</style>